<script setup>
import {ref} from "vue";
import empty_img from "@/assets/images/empty_img.png";
import HomeApis from "@/apis/home.js";
import QuestionApis from '@/apis/question.js'
import ListApis from "@/apis/list.js";
import useUserStore from "@/stores/user.js";
import MyResourceApis from "@/apis/myResource.js";
import {useRouter} from "vue-router";
import buy_icons1 from '@/assets/images/buy_icons1.png'
import buy_icons2 from '@/assets/images/buy_icons2.png'
import buy_icons3 from '@/assets/images/buy_icons3.png'
import buy_icons4 from '@/assets/images/buy_icons4.png'
import buy_icons5 from '@/assets/images/buy_icons5.png'
import buy_icons6 from '@/assets/images/buy_icons6.png'
import buy_icons7 from '@/assets/images/buy_icons7.png'
import buy_icons8 from '@/assets/images/buy_icons8.png'
import buy_icons9 from '@/assets/images/buy_icons9.png'
import buy_icons10 from '@/assets/images/buy_icons10.png'


const industries = ['jiangonglei', 'caikuailei', 'zhicheng']

//先获取行业，再获取考试

const router = useRouter()
const columnsList = ref([]);
const userStore = useUserStore();
let selectCategory = ref(null)
const showChapterVideo = ref(false)
const selectColumnId = ref(null);
const draw1 = ref(false)
const moreList = ref([])
const industriesAndExams = ref([])
const seeMoreIndustryIndex=ref(0)
const myCascader = ref(null)
const packageValue = ref(null)
const packageProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const {level} = node
    if (level == 0) {
      getIndustries().then(industryRes => {
        resolve(industryRes.data.filter(item => {
          item.label = item.name
          item.value = item.id
          item.leaf = false
          return industries.includes(item.id)
        }))
      }).catch(err => {
        resolve([])
      });

    } else if (level == 1) {
      ListApis.examByIndustry({
        params: {
          size: 1000,
          industryId:
          node.value
        }
      }).then(res => {
        res.data.forEach(item => {
          item.label = item.name
          item.value = item.id
          item.leaf = false
        })
        resolve(res.data)

      }).catch(err => {
        resolve([])
      });
    } else if (level == 2) {
      ListApis.packageList({examId: node.value}).then(res => {
        res.data.forEach(item => {
          item.label = item.name
          item.value = item.id
          item.leaf = true
        })
        resolve(res.data)
      }).catch(err => {
        resolve([])
      });
    }
  },
}
const skuDetail = ref(null)
const packageDetail = ref(null)
const typeItems = [{
  name: '章节练习',
  img: buy_icons1
}, {
  name: '模拟题',
  img: buy_icons2
}, {
  name: '历年真题',
  img: buy_icons3
}, {
  name: '每日一练',
  img: buy_icons4
}, {
  name: '文字解析',
  img: buy_icons5
}, {
  name: '助教答疑',
  img: buy_icons6
}, {
  name: '章节真题',
  img: buy_icons7
}, {
  name: '易错题',
  img: buy_icons8
}, {
  name: '下载试卷',
  img: buy_icons9
}, {
  name: '精选题库',
  img: buy_icons10
}]
const questionList = ref([])


function getIndustries() {
  return ListApis.industryList()
}

function getExams(industryId) {
  return ListApis.examByIndustry({
    params: {
      size: 1000,
      industryId,
    },
  })
}

function toggleIndex(item, j) {
  item.activeIndex = j

  ListApis.packageList({examId: item.children[item.activeIndex].id}).then(res1 => {
    res1.data.forEach((item1, index) => {
      item1.cover = item1.cover || '/测试用的图片/2.jpg'
    })
    item.children[item.activeIndex].children = res1.data
    if (res1.data.length >= 8) {
      item.children[item.activeIndex].children1 = res1.data.slice(0, 8)
    } else {
      let arr = new Array(8 - res1.data.length);
      arr.fill(null)
      item.children[item.activeIndex].children1 = [...res1.data, ...arr]
    }
  });
}

function freeSee(item) {
  router.push({
    path: "/study/video/index",
    query: {
      industryId: item.id,
      examId: item.children[item.activeIndex].id,
    }
  })
}

function getHotQuestion() {
  QuestionApis.getHotQuestion({
    params: {
      curren: 1,
      size: 6
    }
  }).then(res => {
    questionList.value = res.data.records.reduce((acc, cur, curIndex) => {
      if (curIndex % 2 == 0) {
        acc.push([cur])
      } else {
        acc[acc.length - 1].push(cur)
      }
      return acc
    }, [])
  })
}

async function init() {
  getHotQuestion()
//   获取行业
  const industryRes = await getIndustries();
  industriesAndExams.value = industryRes.data.filter(item => industries.includes(item.id));
//   获取考试
  industriesAndExams.value.forEach((item) => {
    getExams(item.id).then(res => {
      item.children = res.data
      item.activeIndex = 0

      ListApis.packageList({examId: item.children[item.activeIndex].id}).then(res1 => {
        res1.data.forEach((item1, index) => {
          item1.cover = item1.cover || '/测试用的图片/2.jpg'
        })
        item.children[item.activeIndex].children = res1.data
        if (res1.data.length >= 8) {
          item.children[item.activeIndex].children1 = res1.data.slice(0, 8)
        } else {
          let arr = new Array(8 - res1.data.length);
          arr.fill(null)
          item.children[item.activeIndex].children1 = [...res1.data, ...arr]
        }
      });
    })
  })
}

function handleChange(val) {
  //   console.log(val)
  // console.log(myCascader.value.getCheckedNodes())
  packageDetail.value = myCascader.value.getCheckedNodes()[0].data
  skuDetail.value = null
  ListApis.skuList({
    params: {
      packageId: val.at(-1)
    }
  }).then(res => {
    skuDetail.value = res.data
  })
  // discountPrice
  //
}

function buyVbank() {
  if (!skuDetail.value) return;
  router.push({
    path: '/buyCenter/package/index',
    query: {
      packageId: packageValue.value.at(-1),
      industryId: packageValue.value[0],
      examId: packageValue.value[1],
      ...packageDetail.value
    }
  })
}
function goToPackage(item, item1) {
  router.push({
    path: '/buyCenter/package/index',
    query: {
      packageId: item1.id,
      industryId: item.id,
      examId: item.children[item.activeIndex].id,
      ...item1
    }
  })
}
function seeMore(item,index) {
  draw1.value = true
  seeMoreIndustryIndex.value = index
  moreList.value = item.children[item.activeIndex].children
}
init();

</script>

<template>
  <div class="buyCenter-container">
    <div class="header">
      <div class="header-content">
        <div class="a">
          <div class="b">

          </div>
        </div>
        <img src="@/assets/images/analysis.png" class="analysis-img">
      </div>
    </div>
    <div class="content" id="buyCenter-content">
      <div class="buy-content-item" v-for="(item,index) in industriesAndExams" :key="index">
        <div class="a">
          <div class="aa">
            <img src="@/assets/images/buy1.svg">
            <span>{{ item.name }}</span>
          </div>
          <el-scrollbar class="my-scroll1">
            <div class="my-scroll-flex">
              <span @click="toggleIndex(item,j)" class="my-scroll-flex-text1" :class="{active:item.activeIndex==j}"
                    v-for="(i,j) in item.children" :key="i.id">{{ i.name }}</span>
            </div>
          </el-scrollbar>

        </div>
        <div class="b">
          <div class="ba">
            <div class="baa">
              <span>课程试听</span>
            </div>
            <div class="bab">
              <div>
                <p class="text" v-if="item.children">{{ item.children[item.activeIndex].name }} 自学备考神器</p>
              </div>
              <div class="bac">
                <span>教材精讲 在线智能题库 夯实基础，助力自学</span>
              </div>
              <el-button type="primary" round @click="freeSee(item)">点击查看</el-button>
            </div>
          </div>
          <div class="bb"
               v-if="item.children&&item.children[item.activeIndex].children1&&item.children[item.activeIndex].children1.length>0">
            <div class="bba" v-for="(item1,index1) in item.children[item.activeIndex].children1" :key="index1">

              <div v-if="item1">
                <div class="top-right-tip"
                     v-if="index1==item.children[item.activeIndex].children1.length-1"
                     >
                  <span @click="seeMore(item,index)">更多 ></span>
                </div>
                <span class="text1">
                  {{ item1.name }}
                </span>
                <div class="bbb">
                  <img :src="item1.cover" class="">
                </div>
                <div>
                  <el-tag v-for="(item2,index2) in item1.tagNameList" :key="index2" type="primary">{{ item2 }}</el-tag>
                </div>
                <div class="price-and-btn">
                  <div><span class="unit">￥</span><span class="price">{{ item1.price / 100 }}</span></div>
                  <el-button type="primary" round @click="goToPackage(item,item1)">立即领取</el-button>
                </div>
              </div>
              <img v-else src="@/assets/images/empty2.png" class="empty-img">
            </div>

          </div>

          <!--          <div class="bc">-->
          <!--            <div class="bca">-->
          <!--              <span class="text1">2024年一建建设工程法规知识学习包</span>-->
          <!--              <div class="bcb">-->
          <!--                <div>-->
          <!--                  <span class="text2">董佳佳</span>-->
          <!--                </div>-->
          <!--                <el-button class="btn11" type="primary" round>-->
          <!--                  立即查看-->
          <!--                </el-button>-->
          <!--              </div>-->
          <!--              <img src="@/assets/images/人身像.png">-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </div>
      <div class="v-bank">
        <div class="v-bank-box1">
          <div class="v-bank-box1-text1-container">
            <span class="v-bank-box1-text1">V题库</span>
            <div style="float: right">
              <el-cascader ref="myCascader" v-model="packageValue" :props="packageProps" @change="handleChange"/>
            </div>
          </div>

          <span class="v-bank-box1-text2">V题库会员可通过单买或购课获得，详情咨询客服</span>
          <div class="buy-bg4">
            <div><span class="buy-bg4-text1">￥</span><span
                class="buy-bg4-text2">{{ skuDetail ? skuDetail[0].discountPrice / 100 : '' }}</span><span
                class="buy-bg4-text3">/</span><span class="buy-bg4-text3">科</span></div>
            <div class="buy-bg4-text4">
              <span>有效日期:{{ skuDetail ? skuDetail[0].days : 0 }}天</span>
              <el-divider direction="vertical"/>
              <span>{{ skuDetail ? (skuDetail[0].discountPrice / (100 * 365)).toFixed(2) : 0 }}/天</span>
            </div>
            <div>
              <div class="btn12" @click="buyVbank">
                立即购课
              </div>
            </div>
            <div class="text123">
              开通题库付费会员尊享18+特权
            </div>
          </div>
          <div class="v-bank-box1-text5">
            <span class="v-bank-box1-text5-1">开通题库付费会员尊享 </span><span
              class="v-bank-box1-text5-2">18+特权</span>
          </div>
        </div>
        <div class="v-bank-box2">
          <div class="v-bank-box2-item" v-for="(item,index) in typeItems" :key="index">
            <img :src="item.img">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="usually-question">
        <div class="usually-question-title">
          <span class="usually-question-title-text1">
              常见<span class="usually-question-title-text2">问题</span>
          </span>
          <span>
            FAQ
          </span>
        </div>
        <div class="question-items" id="test">
          <div class="question-item-card" v-for="(item1,index1) of questionList" :key="index1">
            <div class="question-item-card-one" v-for="(item2,index2) of item1" :key="index2">
              <div class="question-item-card-one-title">
                <div class="question-item-card-one-title-icon"></div>
                <span>{{ item2.name }}</span>
              </div>
              <div class="question-item-card-one-text">
                {{ item2.answer }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-drawer v-model="draw1" direction="rtl" size="70%">
      <el-scrollbar height="600">
        <div class="grid-draw">
          <div v-for="(item,index) in moreList" :key="index" class="b radius-12">
            <div v-if="item">
              <p class="class-name">{{ item.name }}</p>
              <p class="class-info">
                <img :src="item.cover">
              </p>
              <div>
                <el-tag v-for="(item2,index2) in item.tagNameList" :key="index2" type="primary">{{ item2 }}</el-tag>
              </div>
              <div class="price-and-btn">
                <div><span class="unit">￥</span><span class="price">{{ item.price / 100 }}</span></div>
                <el-button type="primary" round @click="goToPackage(industriesAndExams[seeMoreIndustryIndex],item)">立即领取</el-button>
              </div>
            </div>
            <img v-else src="@/assets/images/empty2.png" class="empty-img">
          </div>
        </div>
      </el-scrollbar>
    </el-drawer>
  </div>

</template>

<style scoped>

@media screen and (min-width: 1400px) {
  .header-content {
    width: 1400px;
  }
  .content{
    width: 1400px;
  }
}

.header {
  height: 450px;
  background: linear-gradient(315deg, #3C6CFF 1.13%, #7798FF 98.46%);
}

.header-content {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analysis-img {
  width: 364px;
  height: 364px;
}

.header-content .a {
  display: flex;
  width: 280px;
  height: 450px;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.header-content .b {
  display: flex;
  padding: 18px 16px;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.header-content .c {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
}

.content {
  padding: 32px 0;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  flex-direction: column;
  align-items: center;
}

.buy-content-item {
  width: 100%;
  padding: 20px;
  background: white;
  border-radius: 10px;

  box-shadow: 0px 4px 20.4px 0px rgba(60, 108, 255, 0.11);
}

.content .a {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F4F4F4;
}

.a .aa {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  font-size: 24px;

}

.a .aa span {
  font-weight: 700;
}

.a .aa img {
  width: 34px;
  height: 34px;
}

.buy-content-item .b {
  display: grid;
  padding-top: 20px;
  grid-template-columns:270px 1070px;
  grid-template-rows:440px;
  gap: 12px;
}

.ba {
  background-image: url("@/assets/images/buy_bg1.png");
  background-size: cover;
}

.baa {
  width: 125px;
  height: 28px;
  flex-shrink: 0;
  background-image: url("@/assets/images/buy11.svg");
  background-size: cover;
  color: white;
  font-size: 16px;
  font-weight: 400;
  padding-left: 16px;
  margin: 20px 0;
}

.bab {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;

}

.bab .text {
  color: #4065D6;
  font-size: 20px;
  font-weight: 700;
}

.bac {
  height: 159px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(2px);
  padding: 20px;
}

.bb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.bb .bba {

  border-radius: 10px;
  background: #EEF1F6;
  padding: 21px 16px;
}

.bb .bbb {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bb .bbb img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.bc {
  display: grid;
  gap: 12px;
  grid-template-rows: repeat(2, 1fr);
}

.bc .bca {
  display: flex;
  padding: 21px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;

  border-radius: 10px;
  background: #E2E9FF;
  position: relative;
}

.bc .bcb {

}

.bc .btn11 {
  margin-top: 30px;
}

.bca img {
  position: absolute;
  bottom: 0;
  right: 10px;
  height: 170px;
}

.my-scroll1 {
  width: 1000px;
  height: 35px;
  direction: rtl;
}

.my-scroll-flex {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 16px;
  justify-content: flex-end;
}

.my-scroll-flex-text1 {
  padding: 5px 16px;
  cursor: pointer;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  border-radius: 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.my-scroll-flex-text1.active {
  box-sizing: border-box;
  color: #4065D6;
  border: 1px solid #4065D6;
}

.v-bank {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 20.4px 0px rgba(60, 108, 255, 0.11);
  background-image: url("@/assets/images/金色光影背景.png");
  background-size: 110%;
  background-position: -18px -25px;
  background-clip: border-box;


  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.v-bank-box1 {
  width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
}

.v-bank-box1-text1-container {
  width: 100%;
  text-align: center;
}

.v-bank-box1-text1 {

  color: #7E431E;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 2px;
}

.v-bank-box1-text2 {
  color: #B0734D;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.buy-bg4 {
  background-image: url("@/assets/images/buy_bg4.png");
  background-size: cover;


  width: 632px;
  height: 315px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  padding: 70px 30px 10px;
}

.btn12 {
  width: 333.169px;
  height: 68.477px;
  padding: 0px 55px;
  background: #000;
  color: white;
  cursor: pointer;
  border-radius: 34px;
  text-align: center;
  line-height: 68.477px;
}

.text123 {
  align-self: center;
  font-size: 16px;
  font-weight: 400;
  color: #A66E40;
}

.buy-bg4-text1 {
  color: #723611;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}

.buy-bg4-text2 {
  color: #723611;
  text-align: center;
  font-size: 39.977px;
  font-weight: 600;
}

.buy-bg4-text3 {
  color: #723611;
  text-align: center;
  font-size: 15.469px;
  font-weight: 600;
}

.buy-bg4-text4 {
  color: #723611;
  font-size: 14.648px;
  font-weight: 400;
}

.v-bank-box1-text5 {
  color: #8C673C;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
}

.v-bank-box1-text5-2 {
  color: #DAA55C;
}

.v-bank-box2 {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.v-bank-box2-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  color: #E48E2B;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.v-bank-box2-item img {
  width: 64px;
  height: 66px;
}

.usually-question {
  width: 100%;
  padding: 50px 100px;
  border-radius: 10px;
  box-shadow: 0px 4px 20.4px 0px rgba(60, 108, 255, 0.11);
  background-image: url("@/assets/images/buy_bg5.png");
  background-size: 110%;
  background-position: -18px -25px;
  display: flex;
  flex-direction: column;
  gap: 50px;

  box-sizing: border-box;
}

.usually-question-title {
  color: #111;
  font-size: 36px;
  font-weight: 600;
  line-height: 36px;
  text-align: center;
}

.usually-question-title-text1 {
  margin-right: 15px;
}

.usually-question-title-text2 {
  color: #3C6CFF;
  font-size: 36px;
  font-weight: 600;
}

.question-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question-item-card {
  display: flex;
  width: 452px;
  height: 568px;
  padding: 32px 25px 30px 25px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0px 12px 11.8px 0px rgba(221, 229, 255, 0.60);
}

.question-item-card-one {
  height: 253px;
  box-sizing: border-box;
}

.question-item-card-one-title {
  padding-bottom: 23px;
  border-bottom: 1px solid #DFE3E7;
  color: #222;
  font-size: 19.531px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.question-item-card-one-title-icon {
  width: 6px;
  height: 24px;
  border-radius: 3px;
  background: #3C6CFF;
}

.question-item-card-one-text {
  padding: 22px 0 32px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.bba .empty-img {
  width: 200px;
  margin: auto;
}
.bba .top-right-tip{
  text-align: right;
}
.unit{
  font-size: 12px;
}
.unit,.price{
  color: red;
}
.price{
  font-size: 24px;
  font-weight: 400;
}
.price-and-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text1{
  letter-spacing: 1px;
  font-size: 16px;
  font-weight: bolder;
}
.grid-draw {
  padding: 16px;
  background: #FAFAFA;
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: repeat(3, 335px);
  grid-auto-rows: 300px;
}
.radius-12 {
  border-radius: 12px;
  box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.05);
  background: #EEF1F6;

  box-sizing: border-box;
  position: relative;
  padding: 50px 16px 0px 16px;
}
.class-name {
  color: #333;
  font-size: 17.438px;
  font-weight: 700;
  line-height: 25px;
}

.class-info {
  color: #888;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  word-break: break-all;
  min-height: 100px;
}
.class-info img {
  height: 100px;
  width: 180px;
}
</style>
